<template>
    <el-container>
        <el-header :height="'auto'">
            <div class="paddingL paddingT bgc">
                <div class="service">服务名称：</div>
                <div>{{infoForm.servname}}</div>
                <el-button class="btn" type="primary" v-if="activeName === 'info' && !tag" @click="showDialogInfo">编辑
                </el-button>
                <!-- <el-button class="btn" type="primary" v-else-if="activeName === 'info'" @click="modify">保存</el-button> -->
                <i class="icon el-icon-close" @click="closeDrawer"></i>
            </div>
            <div class="detailsBox">
                <div class="detailsMsg paddingL bgc">
                    <el-row>
                        <el-col :span="5">
                            <span>服务编码：</span>
                            <p class="ellipsis" :title="infoForm.servcode">
                                {{infoForm.servcode}}
                            </p>
                        </el-col>
                        <el-col :span="4">
                            <span>版本：</span>
                            <p>
                                {{infoForm.servversion}}
                            </p>
                        </el-col>
                        <el-col :span="4">
                            <span>状态：</span>
                            <p v-if="infoForm.status == 0">编辑中</p>
                            <p v-if="infoForm.status == 1">待审核</p>
                            <p v-if="infoForm.status == 2">待发布</p>
                            <p v-if="infoForm.status == 3">已发布</p>
                            <p v-if="infoForm.status == 4">已作废</p>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-header>
        <el-main class="details">
            <div class="white-block">
                <el-tabs class="heightTabs" v-model="activeName" @tab-click="tabClick">
                    <el-tab-pane label="基本信息" name="info" class="tabsHeight">
                        <div class="article">
                            <div class="current provider mapOutMsg">
                                <breadcrumb :title="'基本信息'" class="breadcrumb breadcrumbB"></breadcrumb>
                            </div>
                            <el-form ref="infoForm" :model="infoForm" :rules="infoRules" label-width="1rem">
                                <el-row type="flex" class="row-bg outlineB" justify="space-between">
                                    <el-col :span="12" class="sysMsg grid-content bg-purple">
                                        <span class="sysTitle">选择服务：</span>
                                        <span class="sysContenrt">
                                                        {{infoForm.servname + ' (' + infoForm.servcode + ') '}}
                                            </span>
                                    </el-col>
                                    <el-col :span="12" class="sysMsg grid-content bg-purple">
                                        <span class="sysTitle">联系人：</span>
                                        <span class="sysContenrt">{{infoForm.name}}</span>
                                    </el-col>
                                </el-row>
                                <el-row type="flex" class="row-bg outlineB" justify="space-between">
                                    <el-col :span="12" class="sysMsg grid-content bg-purple">
                                        <span class="sysTitle">联系方式：</span>
                                        <span class="sysContenrt">{{infoForm.phone}}</span>
                                    </el-col>
                                    <el-col :span="12" class="sysMsg grid-content bg-purple">
                                        <span class="sysTitle">数据源部门：</span>
                                        <span class="sysContenrt">{{infoForm.providedept.label}}</span>
                                    </el-col>
                                </el-row>
                                <el-row type="flex" class="row-bg outlineB" justify="space-between">
                                    <el-col :span="12" class="sysMsg grid-content bg-purple">
                                        <span class="sysTitle">服务访问地址：</span>
                                        <span class="sysContenrt">{{infoForm.apiaddress}}</span>
                                    </el-col>
                                    <el-col :span="12" class="sysMsg grid-content bg-purple">
                                        <span class="sysTitle">共享类型：</span>
                                        <span v-if="infoForm.shareType === '1'" class="sysContenrt">内部共享</span>
                                        <span v-if="infoForm.shareType === '2'" class="sysContenrt">外部共享</span>
                                        <span v-if="infoForm.shareType === '3'" class="sysContenrt">内外部共享</span>
                                    </el-col>
                                </el-row>
                                <el-row type="flex" class="row-bg outlineB" justify="space-between">
                                    <el-col :span="12" class="sysMsg grid-content bg-purple">
                                        <span class="sysTitle">共享平台资源id：</span>
                                        <span class="sysContenrt">{{infoForm.dataPlatformId}}</span>
                                    </el-col>
                                    <el-col :span="12" class="sysMsg grid-content bg-purple">
                                        <span class="sysTitle">数据更新周期：</span>
                                        <span class="sysContenrt" v-if="infoForm.dataUpdateCycle === '1'">实时</span>
                                        <span class="sysContenrt" v-if="infoForm.dataUpdateCycle === '2'">每小时</span>
                                        <span class="sysContenrt" v-if="infoForm.dataUpdateCycle === '3'">每天</span>
                                        <span class="sysContenrt" v-if="infoForm.dataUpdateCycle === '4'">每月</span>
                                        <span class="sysContenrt" v-if="infoForm.dataUpdateCycle === '5'">每季度</span>
                                        <span class="sysContenrt" v-if="infoForm.dataUpdateCycle === '6'">每半年</span>
                                        <span class="sysContenrt" v-if="infoForm.dataUpdateCycle === '7'">每年</span>
                                        <span class="sysContenrt" v-if="infoForm.dataUpdateCycle === '8'">不更新</span>
                                        <span class="sysContenrt" v-if="infoForm.dataUpdateCycle === '9'">不定时</span>
                                    </el-col>
                                </el-row>
                                <el-row class="outlineB">
                                    <el-col :span="24" class="mt20">
                                        <div class="current provider mapOutMsg">
                                            <breadcrumb :title="'请求示例'" class="breadcrumb"></breadcrumb>
                                        </div>
                                        <el-form-item prop="reqExample">
                                            <el-input v-model="infoForm.reqExample"
                                                      placeholder="空"
                                                      type="textarea"
                                                      :readOnly="true"
                                                      class="textareaWidth" :rows="5"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="current provider mapOutMsg">
                                            <breadcrumb :title="'返回示例'" class="breadcrumb"></breadcrumb>
                                        </div>
                                        <el-form-item prop="respExample">
                                            <el-input v-model="infoForm.respExample"
                                                      placeholder="空"
                                                      type="textarea"
                                                      :readOnly="true"
                                                      class="textareaWidth" :rows="5"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="current provider mapOutMsg">
                                            <breadcrumb :title="'服务说明'" class="breadcrumb"></breadcrumb>
                                        </div>
                                        <el-form-item prop="description">
                                            <el-input v-model="infoForm.description"
                                                      placeholder="空"
                                                      type="textarea"
                                                      :readOnly="true"
                                                      class="textareaWidth" :rows="5"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="输入参数信息" name="import" class="tabsHeight">
                        <div class="article">
                            <div class="current provider mapOutMsg">
                                <breadcrumb :title="'输入参数信息'" class="breadcrumb"></breadcrumb>
                            </div>
                            <div class="positioanR">
                                <el-form class="form-common" :model="ruleForm" ref="ruleForm" label-width="2rem">
                                    <el-form-item>
                                        <upload class="fl uploadH"
                                                :showFileList="false"
                                                :data="{apiId: newEditorId, parammode: 0}"
                                                :action="action"
                                                :fileList.sync="ruleForm.infileList"
                                                :listType="'picture'"
                                                :accept="'.xls'"
                                                @change="inchange"
                                                @error="inError"
                                                @success="insuccess">
                                            <template slot="trigger">
                                                <el-link :underline="false" type="primary">上传</el-link>
                                            </template>
                                        </upload>
                                        <el-link class="fl borderL" :underline="false" type="primary"
                                                 @click="newAddParameter(0, true)">新增
                                        </el-link>
                                        <!-- <el-link class="fl borderL" :underline="false" type="primary">批量删除</el-link> -->
                                        <el-link class="fl borderL" :underline="false" type="primary"
                                                 @click="downAPI">
                                            输入参数模板下载
                                        </el-link>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div>
                            <table-example :data="importTableData" :tableColumn="importHeader"
                                           v-loading="loading"
                                           :slotColumns="slotColumns"
                                           class="mt10 tablePadding"
                                           @cell-mouse-enter="handClick"
                                           @row-click="handleClick">
                                <template slot="isNecessary" slot-scope="scope">
                                    <span :underline="false" v-if="scope.row.isNecessary == '0'">是</span>
                                    <span :underline="false" v-if="scope.row.isNecessary == '1'">否</span>
                                </template>
                                <template slot="operation" slot-scope="scope">
                                    <el-link type="primary" :underline="false" class="mr10"
                                             @click="editor(scope.row, 0)">编辑
                                    </el-link>
                                    <el-link type="primary" :underline="false" class="mr10"
                                             @click="del(scope.row, 0)">删除
                                    </el-link>
                                </template>
                            </table-example>
                            <page :data="inputPage" v-if="inputPage" class="mt30 page"
                                  @jumpPage="inputSystem"></page>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="输出参数信息" name="export" class="tabsHeight">
                        <div class="article">
                            <div class="current provider mapOutMsg">
                                <breadcrumb :title="'输出参数信息'" class="breadcrumb"></breadcrumb>
                            </div>
                            <div class="positioanR">
                                <el-form class="form-common" :model="ruleForm" ref="ruleForm" label-width="2rem">
                                    <el-form-item>
                                        <upload class="fl uploadH"
                                                :showFileList="false"
                                                :data="{apiId: newEditorId, parammode: 1}"
                                                :action="action"
                                                :fileList.sync="ruleForm.outfileList"
                                                :listType="'picture'"
                                                :accept="'.xls'"
                                                @change="outchange"
                                                @error="outError"
                                                @success="outsuccess">
                                            <template slot="trigger">
                                                <el-link :underline="false" type="primary">上传</el-link>
                                            </template>
                                        </upload>
                                        <el-link class="fl borderL" :underline="false" type="primary"
                                                 @click="newAddParameter(1, true)">新增
                                        </el-link>
                                        <!-- <el-link class="fl borderL" :underline="false" type="primary">批量删除</el-link> -->
                                        <el-link class="fl borderL" :underline="false" type="primary"
                                                 @click="downAPI">
                                            输出参数模板下载
                                        </el-link>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div>
                            <table-example :data="exportTableData" :tableColumn="exportHeader"
                                           v-loading="loading"
                                           :slotColumns="slotColumns"
                                           class="mt10 tablePadding"
                                           @cell-mouse-enter="handClick"
                                           @row-click="handleClick">
                                <template slot="operation" slot-scope="scope">
                                    <el-link type="primary" :underline="false" class="mr10"
                                             @click="editor(scope.row, 1)">编辑
                                    </el-link>
                                    <el-link type="primary" :underline="false" class="mr10"
                                             @click="del(scope.row, 1)">删除
                                    </el-link>
                                </template>
                            </table-example>
                            <page :data="outputPage" v-if="outputPage" class="mt30 page"
                                  @jumpPage="outputSystem"></page>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="附件信息" name="attachment" class="tabsHeight">
                        <div class="article">
                            <div class="current provider mapOutMsg">
                                <breadcrumb :title="'附件信息'" class="breadcrumb"></breadcrumb>
                            </div>
                            <div class="positioanR">
                                <el-form class="form-common" :model="ruleForm" ref="ruleForm" label-width="2rem">
                                    <el-form-item>
                                        <upload class="fl uploadH"
                                                :showFileList="false"
                                                :fileList.sync="ruleForm.attafileList"
                                                :listType="'picture'"
                                                :accept="'.xls,.zip,.pdf,.doc'"
                                                @change="attachange"
                                                @success="attasuccess">
                                            <template slot="trigger">
                                                <el-link :underline="false" type="primary">上传</el-link>
                                            </template>
                                        </upload>
                                        <!-- <el-link class="fl borderL" :underline="false" type="primary">批量删除</el-link>
                                        <el-link class="fl borderL" :underline="false" type="primary">批量下载</el-link> -->
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div>
                            <table-example :data="attachmentData" :tableColumn="attachmentHeader"
                                           v-loading="loading"
                                           :slotColumns="slotColumns"
                                           class="mt10 tablePadding"
                                           @cell-mouse-enter="handClick"
                                           @row-click="handleClick">
                                <template slot="operation" slot-scope="scope">
                                    <el-link type="primary" :underline="false" class="mr10"
                                             @click="attachmentDown(scope.row)">下载
                                    </el-link>
                                    <el-link type="primary" :underline="false" class="mr10"
                                             @click="attachmentDel(scope.row)">删除
                                    </el-link>
                                </template>
                            </table-example>
                            <page :data="attaPage" v-if="attaPage" class="mt30 page" @jumpPage="attaSystem"></page>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="API编辑历史" name="history" class="tabsHeight">
                        <div class="article">
                            <div class="current provider mapOutMsg">
                                <breadcrumb :title="'API编辑历史'" class="breadcrumb"></breadcrumb>
                            </div>
                        </div>
                        <div>
                            <table-example :data="historyApiData" :tableColumn="APIHeader"
                                           v-loading="loading"
                                           :slotColumns="slotColumns"
                                           class="mt10 tablePadding"
                                           @cell-mouse-enter="handClick"
                                           @row-click="handleClick">
                                <template slot="operationType" slot-scope="scope">
                                    <span v-if="scope.row.operationType == '0'">新增</span>
                                    <span v-if="scope.row.operationType == '1'">编辑</span>
                                    <span v-if="scope.row.operationType == '2'">提交审核</span>
                                    <span v-if="scope.row.operationType == '3'">审核通过</span>
                                    <span v-if="scope.row.operationType == '4'">回退</span>
                                    <span v-if="scope.row.operationType == '5'">发布</span>
                                    <span v-if="scope.row.operationType == '6'">作废</span>
                                    <span v-if="scope.row.operationType == '7'">启用</span>
                                    <span v-if="scope.row.operationType == '8'">excel导入入参</span>
                                    <span v-if="scope.row.operationType == '9'">excel导入出参</span>
                                    <span v-if="scope.row.operationType == '10'">单条入参新增</span>
                                    <span v-if="scope.row.operationType == '11'">单条出参新增</span>
                                    <span v-if="scope.row.operationType == '12'">上传文件</span>
                                    <span v-if="scope.row.operationType == '13'">下载文件</span>
                                </template>
                            </table-example>
                            <page :data="historyPage" v-if="historyPage" class="mt30 page"
                                  @jumpPage="historySystem"></page>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-main>
        <!--  修改API信息弹框-->
        <dialog-msk :show.sync="newAPIInformation" ref="newSystemRef" :appendBody="true" :toBody="false"
                    :noEsc="false"
                    :noModal="false"
                    :center="true" width="12rem"
                    @cancel="newAPICancel" :marginTop="'10vh'"
                    title="编辑API信息">
                <span slot="footer" class="dialog-footer">
                    <span slot="footer">
                        <el-button @click="newAPIInformation=false">取 消</el-button>
                        <el-button type="primary" @click="modify">保 存</el-button>
                    </span>
                </span>
            <el-form ref="infoFormRef" :model="infoForm" :rules="infoRules" label-width="2rem"
                     class="scrollHeight">
                <div class="current provider mapOutMsg">
                    <breadcrumb :title="'基本信息'" class="breadcrumb"></breadcrumb>
                </div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="选择服务：" prop="servcode" class="fontItem">
                            <el-select v-model="infoForm.servcode" placeholder="请选择" class="inputWidthD"
                                       @change="getServname" filterable :disabled="true">
                                <el-option v-for="item in infoForm.serviceOptions"
                                           :key="item.serviceid"
                                           :label="item.servname + ' (' + item.servcode + ') '"
                                           :value="item.servcode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系人：" prop="name">
                            <el-input v-model="infoForm.name" placeholder="请输入内容"
                                      class="inputWidthD"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系方式：" prop="phone">
                            <el-input v-model="infoForm.phone" placeholder="请输入内容"
                                      class="inputWidthD"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="数据源部门：" prop="providedept">
                            <select-tree class="inputWidthD"
                                         :loading.sync="provideDeptTree.loading"
                                         :renderTree.sync="provideDeptTree.renderTree"
                                         :lazy.sync="provideDeptTree.lazy"
                                         :clearable.sync="provideDeptTree.clearable"
                                         :filterable.sync="provideDeptTree.filterable"
                                         :model.sync="infoForm.providedept"
                                         :accordion.sync="provideDeptTree.accordion"
                                         :expandAll.sync="provideDeptTree.expandAll"
                                         :provideDeptTree="provideDeptTree"
                                         @loadNode="dataLoadNode"
                                         @nodeClick="dataConsumersNodeClick"
                                         @filterMethod="dataFilter"
                                         :props="dataConsumersprops"
                                         :options="provideDeptTree.options">
                            </select-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务访问地址：" prop="apiaddress">
                            <el-input v-model="infoForm.apiaddress" placeholder="请输入内容"
                                      class="inputWidthD"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="共享类型：" prop="shareType">
                            <el-select v-model="infoForm.shareType" placeholder="请选择" class="inputWidthD">
                                <el-option
                                    v-for="item in typeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="共享平台资源id：" prop="dataPlatformId">
                            <el-input v-model="infoForm.dataPlatformId" placeholder="请输入内容" class="inputWidthD"
                                      :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="数据更新周期：" prop="dataUpdateCycle">
                            <el-select v-model="infoForm.dataUpdateCycle" placeholder="请选择" class="inputWidthD">
                                <el-option
                                    v-for="item in infoForm.cycleOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <div class="current provider mapOutMsg">
                            <breadcrumb :title="'请求示例'" class="breadcrumb"></breadcrumb>
                        </div>
                        <el-form-item prop="reqExample">
                            <el-input v-model="infoForm.reqExample"
                                      type="textarea"
                                      class="textareaWidthD" :rows="5"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <div class="current provider mapOutMsg">
                            <breadcrumb :title="'返回示例'" class="breadcrumb"></breadcrumb>
                        </div>
                        <el-form-item prop="respExample">
                            <el-input v-model="infoForm.respExample"
                                      type="textarea"
                                      class="textareaWidthD" :rows="5"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <div class="current provider mapOutMsg">
                            <breadcrumb :title="'服务说明'" class="breadcrumb"></breadcrumb>
                        </div>
                        <el-form-item prop="description">
                            <el-input v-model="infoForm.description"
                                      type="textarea"
                                      class="textareaWidthD" :rows="5"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </dialog-msk>

        <!--  新增系统弹框-->
        <dialog-msk :show.sync="addParameter" ref="newSystemRef" :appendBody="true" :noEsc="false" :noModal="false"
                    :center="true"
                    :width="'7rem'"
                    @cancel="nuwCancelTree"
                    :title="parammode == 0 ? '输入参数信息维护' : '输出参数信息维护'">
            <span slot="footer" class="dialog-footer">
                <span slot="footer">
                    <el-button @click="addParameter=false">取 消</el-button>
                    <el-button type="primary" v-if="newDialog" @click="saveAddParameterNew">保 存</el-button>
                    <el-button type="primary" v-else @click="saveAddParameter">保 存</el-button>
                </span>
            </span>
            <div>
                <el-form ref="newFormDialog" :model="newForm" label-width="1.5rem" :rules="newRules">
                    <el-form-item label="参数：" prop="paramname">
                        <el-input v-model="newForm.paramname" placeholder="请输入" class="inputWidth"></el-input>
                    </el-form-item>

                    <el-form-item label="类型：" prop="paramtype">
                        <el-input v-model="newForm.paramtype" placeholder="请输入" class="inputWidth"></el-input>
                    </el-form-item>

                    <el-form-item label="是否必填：" v-if="parammode == '0'" prop="isNecessary">
                        <el-select v-model="newForm.isNecessary" placeholder="请选择" class="inputWidth">
                            <el-option
                                v-for="item in isNecessaryOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="说明：" prop="paramremarker">
                        <el-input v-model="newForm.paramremarker" placeholder="请输入" class="inputWidth"
                                  type="textarea" :rows="5"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>
    </el-container>
</template>

<script>
    import upload from '../../components/upload'
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import breadcrumb from '../../components/breadcrumb'
    import selectTree from '../../components/select-tree'

    export default {
        name: '',
        props: ['id', 'detailsId', 'tag'],
        data() {
            let underline = /^(?![0-9_]+$)[0-9a-zA-Z_.]+$/,
                under = (rule, value, callback) => {
                    if (!underline.test(value)) {
                        return callback(new Error('编码只能出现数字、字母、下划线，不能以数字或者下划线开头'))
                    } else {
                        callback()
                    }
                },
                type = /[a-zA-Z<>]+$/,
                letter = (rule, value, callback) => {
                    if (!type.test(value)) {
                        return callback(new Error('类型只能是字母'))
                    } else {
                        callback()
                    }
                }
            return {
                ruleForm: {
                    infileList: [],
                    outfileList: [],
                    attafileList: []
                },
                activeName: 'info',
                infoForm: {
                    serviceOptions: [], // 选择服务选项
                    servcode: '', // 选择服务
                    servname: '', // 服务名称
                    servversion: '', // 服务版本
                    name: '', // 联系人姓名
                    phone: '', // 联系方式
                    providedept: {
                        value: '',
                        label: ''
                    },
                    apiaddress: '', // 服务访问地址
                    shareType: '', // 共享类型
                    dataUpdateCycle: '', // 数据更新周期
                    cycleOptions: [
                        {
                            value: '1',
                            label: '实时'
                        },
                        {
                            value: '2',
                            label: '每小时'
                        },
                        {
                            value: '3',
                            label: '每天'
                        },
                        {
                            value: '4',
                            label: '每月'
                        },
                        {
                            value: '5',
                            label: '每季度'
                        },
                        {
                            value: '6',
                            label: '每半年'
                        },
                        {
                            value: '7',
                            label: '每年'
                        },
                        {
                            value: '8',
                            label: '不更新'
                        },
                        {
                            value: '9',
                            label: '不定时'
                        }
                    ],
                    dataPlatformId: null, // 共享平台资源id
                    reqExample: '', // 请求示例
                    respExample: '', // 返回示例
                    description: '' // 服务说明
                },
                dataConsumersprops: {
                    value: 'code', // ID字段名
                    label: 'label', // 显示名称
                    // children: 'haschildren', // 子级字段名
                    isLeaf: function (data, node) { // 是否为子节点
                        if (!data.expand) return true
                    }
                }, // 数据源部门
                provideDeptTree: { // 数据源部门树形下拉框参数
                    lazy: true,
                    clearable: false,
                    filterable: false,
                    accordion: false, // 一次只展开一个同级节点
                    expandAll: false, // 默认展开所有节点
                    loading: false, // 是否显示loading
                    renderTree: true, // 是否显示tree，隐藏后再次显示以此来重新渲染
                    options: []
                },
                infoRules: {
                    servcode: [
                        {required: true, message: '请选择服务', trigger: 'change'}
                    ],
                    name: [
                        {min: 0, max: 10, message: '长度不超过10', trigger: 'blur'}
                    ],
                    phone: [
                        {pattern: /^[0-9-]{0,15}$/, message: '联系方式为数字类型或"-"且长度不超过15', trigger: 'blur'}
                    ],
                    providedept: [
                        {required: true, message: '请选择数据源部门', trigger: 'change'}
                    ],
                    apiaddress: [
                        {required: false, message: '请输入访问地址', trigger: 'blur'},
                        {pattern: /^(http:\/\/|https:\/\/).+$/, message: '请输入有效地址', trigger: 'blur'}
                    ],
                    shareType: [
                        {required: true, message: '请选择共享类型', trigger: 'blur'}
                    ],
                    dataPlatformId: [
                        {pattern: /^\d{0,50}$/, message: 'ID为数字类型且长度不超过50', trigger: 'blur'}
                    ],
                    dataUpdateCycle: [
                        {required: true, message: '请选择更新周期', trigger: 'change'}
                    ],
                    description: [
                        {min: 0, max: 200, message: '长度不超过200', trigger: 'blur'}
                    ]
                },
                slotColumns: ['operation', 'status', 'operationType', 'isNecessary'],
                currentPage: 1,
                pageSize: 10,
                typeOptions: [
                    {
                        value: '1',
                        label: '内部共享'
                    },
                    {
                        value: '2',
                        label: '外部共享'
                    },
                    {
                        value: '3',
                        label: '内外部共享'
                    }
                ], // 共享类型选项
                APIEditorInput: '', // 列表输入框
                historyApiData: [], // API历史数据
                APIHeader: [
                    {
                        prop: '',
                        label: '',
                        minWidth: '7%',
                        align: ''
                    },
                    {
                        prop: 'username',
                        label: '操作人',
                        minWidth: '7%',
                        align: 'left'
                    },
                    {
                        prop: 'operationTime',
                        label: '编辑时间',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'operationType',
                        label: '编辑操作类型',
                        minWidth: '10%',
                        align: 'center'
                    },
                    {
                        prop: 'operationMessage',
                        label: '编辑操作信息',
                        minWidth: '10%',
                        align: 'center'
                    }
                ], // API历史表格数据
                historyPage: '', // API历史分页
                importTableData: [], // API输入数据
                importHeader: [
                    {
                        prop: '',
                        label: '',
                        minWidth: '7%',
                        align: ''
                    },
                    {
                        prop: 'paramname',
                        label: '参数',
                        minWidth: '7%',
                        align: 'left'
                    },
                    {
                        prop: 'paramtype',
                        label: '类型',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'isNecessary',
                        label: '是否必填',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'paramremarker',
                        label: '说明',
                        minWidth: '10%',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: '10%',
                        align: 'center'
                    }
                ], // API输入表格数据
                inputPage: '', // API输入分页
                exportTableData: [], // API输出数据
                exportHeader: [
                    {
                        prop: '',
                        label: '',
                        minWidth: '7%',
                        align: ''
                    },
                    {
                        prop: 'paramname',
                        label: '参数',
                        minWidth: '7%',
                        align: 'left'
                    },
                    {
                        prop: 'paramtype',
                        label: '类型',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'paramremarker',
                        label: '说明',
                        minWidth: '10%',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: '10%',
                        align: 'center'
                    }
                ], // API输出表格数据
                outputPage: '', // API输出分页
                attachmentData: [], // API附件数据
                attachmentHeader: [
                    {
                        prop: '',
                        label: '',
                        minWidth: '1%',
                        align: ''
                    },
                    {
                        prop: 'filename',
                        label: '文件名',
                        minWidth: '50%',
                        align: 'left'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: '40%',
                        align: 'center'
                    }
                ], // API附件表格数据
                attaPage: '', // API附件分页
                addParameter: false, // tabs列表新增按钮
                loading: false,
                newForm: {
                    paramname: '',
                    paramtype: '',
                    isNecessary: '',
                    paramremarker: ''
                },
                newRules: {
                    paramname: [
                        {required: true, message: '请输入参数', trigger: 'blur'},
                        {min: 0, max: 20, message: '长度不超过20', trigger: 'blur'},
                        {validator: under}
                    ],
                    paramtype: [
                        {required: true, message: '请输入类型', trigger: 'blur'},
                        {min: 0, max: 20, message: '长度不超过20', trigger: 'blur'},
                        {validator: letter}
                    ],
                    isNecessary: [{required: true, message: '请选择是否必填', trigger: 'change'}],
                    paramremarker: [{min: 0, max: 200, message: '长度不超过200', trigger: 'blur'}]
                },
                isNecessaryOptions: [
                    {
                        value: '0',
                        label: '是'
                    },
                    {
                        value: '1',
                        label: '否'
                    }
                ],
                page: null,
                newId: '', // 编辑id
                parammode: '',
                newEditorId: '', // 编辑新建id
                firstDeptList: null,
                dataData: null,
                newDialog: '',
                oneId: '',
                showDialog: true,
                action: window.localStorage.getItem('ajaxApi') + '/APIEdit/fileUp',
                newAPIInformation: false
            }
        },
        mounted() {
            this.getSelect()
            this.getFormData()
            // this.getAPIHistoryData()
            // this.getInputData()
            // this.getOutputData()
            // this.getAttachmentData()
        },

        methods: {
            // 选择服务
            getSelect() {
                this.$http.get('/EsbInboundMain/selectAllService').then(result => {
                    if (result.success) {
                        for (let i = 0; i < result.data.length; i++) {
                            this.infoForm.serviceOptions.push(result.data[i])
                        }
                    }
                })
            },
            // 获取服务名称
            getServname(servcode) {
                this.$http.get('/EsbInboundMain/selectServiceByServcode', {
                    servcode: servcode
                }).then(result => {
                    if (result.success) {
                        this.infoForm.servname = result.data[0].servname
                        this.infoForm.servversion = result.data[0].servversion
                    }
                })
            },
            // 详情/修改部分表单信息数据
            getFormData() {
                this.$http.get('/APIEdit/selectDetail', {
                    id: this.detailsId || 0
                }).then(result => {
                    if (result.success && result.data) {
                        this.infoForm.servcode = result.data.servcode
                        this.infoForm.servname = result.data.servname
                        this.infoForm.servversion = result.data.servversion
                        this.infoForm.status = result.data.status
                        this.infoForm.name = result.data.name
                        this.infoForm.phone = result.data.phone
                        this.infoForm.apiaddress = result.data.apiaddress
                        this.infoForm.shareType = result.data.shareType
                        this.infoForm.reqExample = result.data.reqExample
                        this.infoForm.respExample = result.data.respExample
                        this.infoForm.description = result.data.description
                        this.newEditorId = result.data.id
                        this.infoForm.dataUpdateCycle = result.data.dataUpdateCycle + ''
                        this.infoForm.dataPlatformId = result.data.dataPlatformId
                        this.$nextTick(() => {
                            this.infoForm.providedept = {
                                value: result.data.providedeptCode,
                                label: result.data.providedept
                            }
                        })
                    }
                })
            },

            // 子传父编辑按钮
            showDialogInfo() {
                this.newAPIInformation = true
            },

            // 关闭抽屉子传父
            closeDrawer() {
                this.$emit('closeDrawer')
            },

            // 关闭新建API信息弹框
            newAPICancel() {
                this.$refs.infoFormRef.resetFields()
            },

            // Tabs切换
            tabClick(val) {
                this.currentPage = 1
                this.activeName = val.name
                if (val.paneName === 'history') {
                    this.getAPIHistoryData()
                } else if (val.paneName === 'attachment') {
                    this.getAttachmentData()
                } else if (val.paneName === 'export') {
                    this.getOutputData()
                } else if (val.paneName === 'import') {
                    this.getInputData()
                } else {
                    this.getFormData()
                }
            },
            // API编辑历史数据
            getAPIHistoryData() {
                this.loading = true
                this.$http.get('/APIEdit/editHistoryApi', {
                    apiId: this.detailsId,
                    current: this.currentPage,
                    size: this.pageSize
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.historyPage = result.data
                        this.historyApiData = result.data.records
                    }
                })
            },
            // 历史分页
            historySystem(val) {
                this.currentPage = val
                this.getAPIHistoryData()
            },

            // 输入参数信息
            getInputData() {
                this.loading = true
                this.$http.get('/APIEdit/selectInOutParameterApi', {
                    apiId: this.detailsId || this.newEditorId,
                    current: this.currentPage,
                    size: this.pageSize,
                    parammode: 0
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.inputPage = result.data
                        this.importTableData = result.data.records
                    }
                })
            },
            // 输入分页
            inputSystem(val) {
                this.currentPage = val
                this.getInputData()
            },

            // 输出参数信息
            getOutputData() {
                this.loading = true
                this.$http.get('/APIEdit/selectInOutParameterApi', {
                    apiId: this.detailsId || this.newEditorId,
                    current: this.currentPage,
                    size: this.pageSize,
                    parammode: 1
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.outputPage = result.data
                        this.exportTableData = result.data.records
                    }
                })
            },
            // 输出分页
            outputSystem(val) {
                this.currentPage = val
                this.getOutputData()
            },

            // 附件信息
            getAttachmentData() {
                this.loading = true
                this.$http.get('/APIEdit/accessoryEditApi', {
                    apiId: this.detailsId,
                    current: this.currentPage,
                    size: this.pageSize
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.attaPage = result.data
                        this.attachmentData = result.data.records
                    }
                })
            },
            // 附件分页
            attaSystem(val) {
                this.currentPage = val
                this.getAttachmentData()
            },

            // 修改信息
            modify() {
                this.$refs.infoForm.validate(valid => {
                    if (valid) {
                        this.$http.get('/APIEdit/updateOneMess', {
                            id: this.detailsId,
                            name: this.infoForm.name,
                            phone: this.infoForm.phone,
                            providedept: this.infoForm.providedept.label,
                            providedeptCode: this.infoForm.providedept.value,
                            apiaddress: this.infoForm.apiaddress,
                            shareType: this.infoForm.shareType,
                            reqExample: this.infoForm.reqExample,
                            respExample: this.infoForm.respExample,
                            description: this.infoForm.description,
                            dataUpdateCycle: this.infoForm.dataUpdateCycle,
                            dataPlatformId: this.infoForm.dataPlatformId
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功!'
                                })
                                this.newAPIInformation = false
                                this.getFormData()
                            }
                        })
                    }
                })
            },
            // 导入导出模板下载
            downAPI() {
                window.open(window.localStorage.getItem('ajaxApi') + '/APIEdit/fileExport?apiId=' + this.detailsId + '&parammode=1')
                this.$message({
                    type: 'success',
                    message: '输入输出参数模板下载成功!'
                })
            },
            // 编辑
            editor(row, parammode) {
                this.newId = row.id
                this.parammode = parammode
                this.$http.get('/APIEdit/selectInOutParameterApiOneMess', {
                    id: row.id
                }).then(result => {
                    if (result.success) {
                        this.newForm = result.data
                    }
                    this.addParameter = true
                })
            },
            // 删除
            del(row, parammode) {
                this.$confirm('确定要删除该条参数吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/APIEdit/deleteInOutParameterApi', {
                        id: row.id
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.getInputData()
                            this.getOutputData()
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            // 附件下载
            attachmentDown(row) {
                window.open(window.localStorage.getItem('ajaxApi') + '/APIEdit/accessoryDownLoadApi?id=' + row.id + '&apiId=' + this.detailsId)
                this.$message({
                    type: 'success',
                    message: '附件下载成功!'
                })
            },
            // 附件删除
            attachmentDel(row) {
                this.$confirm('确定要删除该目录吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/APIEdit/accessoryDeleteApi', {
                        id: row.id
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                        }
                    })
                    this.getAttachmentData()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            // 表格点击事件
            handleClick(row) {

            },
            // 表格鼠标移入事件
            handClick(row) {

            },
            // 输入上传
            inchange(file, fileList) {
                this.ruleForm.infileList = fileList.slice(-1)
            },
            // 输出上传
            outchange(file, fileList) {
                this.ruleForm.outfileList = fileList.slice(-1)
            },
            // 附件上传
            attachange(file, fileList) {
                this.ruleForm.attafileList = fileList.slice(-1)
            },
            // 输入上传成功后触发
            insuccess(file, response) {
                if (response.success) {
                    this.$message({
                        type: 'success',
                        message: '输入参数上传成功!'
                    })
                    this.getInputData()
                } else {
                    this.$method.messageBox('alert', response.message)
                }
                this.ruleForm.infileList = []
            },
            // 输入上传失败
            inError() {
                // this.$message({
                //     type: 'error',
                //     message: '输入参数上传失败!'
                // })
                this.ruleForm.infileList = []
            },

            // 输出上传成功后触发
            outsuccess(file, response) {
                if (response.success) {
                    this.$message({
                        type: 'success',
                        message: '输出参数上传成功!'
                    })
                    this.getOutputData()
                } else {
                    this.$method.messageBox('alert', response.message)
                }
                this.ruleForm.outfileList = []
            },
            // 输出上传失败
            outError() {
                // this.$message({
                //     type: 'error',
                //     message: '输出参数上传失败!'
                // })
                this.ruleForm.outfileList = []
            },

            // 附件上传成功后触发
            attasuccess(file, response) {
                if (response.success) {
                    this.$http.post('/APIEdit/fileAnnexUp', {
                        apiId: this.detailsId || 0,
                        name: this.ruleForm.attafileList[0].name,
                        filePath: this.ruleForm.attafileList[0].url
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '附件信息上传成功!'
                            })
                            this.getAttachmentData()
                        } else {
                            this.$message({
                                type: 'error',
                                message: '附件信息上传失败!'
                            })
                        }
                    })
                } else {
                    this.$method.messageBox('alert', response.message)
                }

                this.ruleForm.attafileList = []
            },
            // 新增弹框
            newAddParameter(parammode, newDialog) {
                this.parammode = parammode
                this.newDialog = newDialog
                this.addParameter = true
            },
            // 输入输出 新增
            saveAddParameterNew() {
                this.$refs.newFormDialog.validate((valid) => {
                    if (valid) {
                        this.$http.get('/APIEdit/inOutParameterApi', {
                            apiId: this.newEditorId,
                            parammode: this.parammode,
                            isNecessary: this.newForm.isNecessary || '',
                            paramname: this.newForm.paramname,
                            paramremarker: this.newForm.paramremarker,
                            paramtype: this.newForm.paramtype
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '新增成功!'
                                })
                                if (this.parammode === 0) {
                                    this.getInputData()
                                } else {
                                    this.getOutputData()
                                }
                            }
                            this.addParameter = false
                        })
                    }
                })
            },
            // 输入输出 编辑
            saveAddParameter() {
                this.$refs.newFormDialog.validate((valid) => {
                    if (valid) {
                        this.$http.get('/APIEdit/outParameterApi', {
                            id: this.newId,
                            parammode: this.parammode,
                            isNecessary: this.newForm.isNecessary || '',
                            paramname: this.newForm.paramname,
                            paramremarker: this.newForm.paramremarker,
                            paramtype: this.newForm.paramtype
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功!'
                                })
                                if (this.parammode === 0) {
                                    this.getInputData()
                                } else {
                                    this.getOutputData()
                                }
                            }
                            this.addParameter = false
                        })
                    }
                })
            },
            // 关闭弹框事件
            nuwCancelTree() {
                this.newForm.isNecessary = ''
                this.newDialog = ''
                // this.newForm = []
                this.$refs.newFormDialog.resetFields()
            },

            // 获取树形结构数据-搜索
            dataFilter(event, callback) {
                if (this.selectTreeFilter) clearTimeout(this.selectTreeFilter)
                if (event || event !== '') {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = false
                        this.$http.get('/APIEdit/getDept', {
                            message: event
                        }).then(result => {
                            if (result.success) {
                                this.provideDeptTree.loading = false
                                this.provideDeptTree.options = this.$method.treeProcess(result.data)
                            }
                            this.selectTreeFilter = null
                            if (callback) callback()
                        }).catch(() => {
                            this.provideDeptTree.loading = false
                            this.selectTreeFilter = null
                            if (callback) callback()
                        })
                    }, 300)
                } else {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = true
                        if (callback) callback()
                    }, 300)
                }

            },

            // 获取树形结构数据
            dataLoadNode(parentId, callback) {
                if (!parentId && this.firstDeptList) {
                    this.provideDeptTree.loading = false
                    if (callback) callback(this.firstDeptList)
                } else {
                    this.$http.get('/APIEdit/getDeptName', {
                        id: parentId || 0
                    }).then(result => {
                        if (result.success) {
                            if (result.data[0]) {
                                result.data.forEach(item => {
                                    if (!item.label) {
                                        item.label = item.abbreviation || item.name
                                    }
                                })
                            }
                            this.provideDeptTree.loading = false
                            if (callback) callback(result.data)
                        }
                    }).catch(() => {
                        this.provideDeptTree.loading = false
                        this.$message({
                            type: 'info',
                            message: '获取部门失败!'
                        })
                    })
                }
            },
            // 切换触发的事件
            dataConsumersNodeClick(node, callback) {
                if (node.haschildren) return
                if (callback) callback()
            }
        },
        components: {
            upload,
            dialogMsk,
            tableExample,
            page,
            breadcrumb,
            selectTree
        }
    }
</script>

<style scoped lang="less">
    .sysMsg {
        min-height: .4rem;
        /*height: .4rem;*/
        border-bottom: .01rem solid #E1E1E1;
        margin-bottom: .3rem;
        margin-right: 1rem;

        .sysTitle {
            color: #999;
            margin-right: .2rem;
        }

        .sysContenrt {
            /*float: left;*/
            width: 3rem;
            overflow-wrap: break-word;
            display: inline-block;
            vertical-align: text-top;
            color: #444;
        }
    }

    .breadcrumb {
        height: 0.15rem;
        margin: 0.2rem 0 0.4rem 0;
        padding-left: 0.1rem;
        border-left: 2px solid #5586FB;
    }

    .breadcrumbB {
        margin-bottom: 0.2rem;
    }

    .detailsBox {
        height: 100%;

        .detailsMsg {
            padding: 0.2rem 0 0.1rem 0.2rem;
            font-size: 0.14rem;

            span {
                width: 2rem;
                color: #999;
                display: inline-block;
            }

            p {
                line-height: .3rem;
                color: #333;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 100%;
                cursor: pointer;
            }
        }
    }

    .details {
        width: 100%;
        position: relative;

        > .white-block {
            padding: 0;
        }

        > * {
            height: 100%;
        }
    }

    .heightTabs {
        height: 100%;

        .article {
            position: relative;
            padding-left: 0.2rem;
            height: 0.4rem;
            margin-top: 0.4rem;
            font-size: 0.16rem;

            .breadcrumb {
                height: 0.15rem;
                margin-top: 0.2rem;
                padding-left: 0.1rem;
                border-left: 2px solid #5586FB;
            }

            .borderL {
                height: 0.15rem;
                line-height: 0.15rem;
                padding: 0 0.1rem;
                border-left: 1px solid #ccc;
            }

            .positioanR {
                position: absolute;
                top: 0;
                right: 0.2rem;

                .uploadH {
                    padding-right: 0.1rem;
                    height: 0.15rem;
                    line-height: 0.15rem;
                }
            }

            .outlineB {
                width: 100%;

                .formItem {
                    width: 5rem;
                    height: 0.6rem;
                    padding-top: 0.2rem;
                    padding-bottom: 0.05rem;
                    margin-left: 0.1rem;
                    border-bottom: 0.01rem solid #E1E1E1;

                    span {
                        &:nth-child(2) {
                            width: 3rem;
                            color: #333;
                        }
                    }
                }

                .label {
                    display: inline-block;
                    margin-right: .2rem;
                    /*width: 1.4rem;*/
                }

                .serviceContent {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    vertical-align: middle;
                    cursor: pointer;
                    display: inline-block;
                    width: 3.6rem;
                }

                /*span {*/
                /*    font-size: 0.16rem;*/
                /*    color: #999;*/
                /*}*/
            }

        }

        .textareaWidth {
            width: 100%;
            margin: 0.2rem 0 0 -0.9rem;
        }
    }

    .inputWidth {
        width: 4rem;
    }

    .upload {
        float: left;
    }

    .paddingT {
        padding-top: 0.2rem;
    }

    .paddingL {
        position: relative;
        padding-left: 0.2rem;

        .service {
            padding-bottom: 0.1rem;
            color: #999;
            font-size: 0.14rem;
            line-height: .35rem;
        }

        .btn {
            position: absolute;
            top: 0.2rem;
            right: 0.9rem;
        }

        .icon {
            position: absolute;
            top: 0.25rem;
            right: 0.2rem;
            font-size: 0.30rem;
            color: #999;
            cursor: pointer;
        }
    }

    .bgc {
        background-color: #F1F5FD;
    }

    .scrollHeight {
        height: 6rem;
        overflow-x: hidden;
        overflow-y: auto;

        .inputWidthD {
            width: 3rem;
        }

        .textareaWidthD {
            width: 10.55rem;
            margin: 0.2rem 0 0 -1.9rem;
        }
    }

    .tabsHeight {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .el-dialog__wrapper /deep/ .el-dialog__body {
        padding: 0 0.2rem;
    }

    .tablePadding {
        padding: 0 0.2rem;
    }
</style>
